<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <title>Playing with intervals</title>
	<style type="text/css">
		#appArea {
			background-color:#dadada;
		}
		
		#appArea li {
			background-color: #AEDC66;
		    border-bottom: 1pt solid #333333;
		    color: #3D3D3D;
		    font-family: helvetica;
		    list-style: none outside none;
		}
		
	</style>
</head>
<body>
<button id="continueInterval">Start</button>
<button id="pauseInterval">Pause</button>
<ul id="appArea">
</ul>
<script type="text/javascript">
$(function(){
	$.extend({
		refresh: {
			delay: 1000,
			id: undefined,
			job: function() {
				var date = new Date();
				$('<li>' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds() + ':' + date.getMilliseconds()  +'</li>').prependTo('#appArea');
			},
			pause: function() {
				// stopping interval
				clearInterval($.refresh.id);
				// clearing id
				$.refresh.id = undefined;
			},
			start: function() {
				if($.refresh.job && $.refresh.delay && !$.refresh.id) {
					$.refresh.id = setInterval(function(){
						$.refresh.job();
					}, $.refresh.delay);
				}
			}
		}
	});
	
	// usage
	/* // start time
	 * $.refresh.start();
	 * // pause timer
	 * $.refresh.pause();
	 *
	 */
	
	$('#continueInterval').click(function(){
		var $this = $(this);
		if($this.text() != 'Continue') {
			$this.text('Continue');
		}
		/*
		 * checking if job & delay has values
		 * AND id has to be undefined to prevent multi intervals working concurrently
		 */
		$.refresh.start();
	});
	
	$('#pauseInterval').click(function(){
		$.refresh.pause();
	});
	
});
</script>
</body>
</html>